{% extends '../../../source/frontend/layouts/skins/v2/layout_detail.volt' %}

{% block header %}
    <title>{{ video.videoDescription.getName() }}</title>
    <meta name="title" content="{{ video.videoDescription.getName() }}" />
    <meta name="description" content="{{ video.videoDescription.getDescription() }}" />
    <meta property="og:title" content="{{ video.videoDescription.getName() }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{ video.videoDescription.getDescription() }}" />
    <meta property="og:image" content="{{ url(helper.getPathImageFromImageLink(video.getMainImages() , '220_124')) }}" />
    <meta property="og:site_name" content="JAVHD.VN" />
    <meta property="og:video" content="https://secure.hulu.com/embed/1NZ3eohccy_6gkWSigziJQ"/>
    <meta property="og:url" content="http://www.hulu.com/watch/703835?playlist_id=1031"/>
    <meta property="og:video:type" content="application/x-shockwave-flash"/>
{% endblock %}

{% block videoPlayerSection %}
<div id="video-player-section" class="watch-page">
    <div class="video-player-container">
        <div ng-controller="videoController" class="video-player-root">
            <div id="player-container" class="container with-background" style="width: 954px; height: 542px; padding: 9px; left: auto; visibility: visible; background-size: 962px 549px; background-position: 0px 0px;">
                <div id="flash-player-container" class="player">
                    {% include 'video/detail/player.volt'  %}
                </div>
            </div>

            <div id="video-description" class="container player-width" style="width: 944px;">
                <div class="row">
                    <div class="pull-left">
                        <div class="poster-actions margin-bottom-30">
                            {{ image(helper.getPathImageFromImageLink(video.getMainImages() , '220_124') , 'width' :120 , 'height' : 70) }}
                        </div>
                    </div>
                    <div class="pull-left">
                        <div class="watch-desc">
                            <div class="">
                                <h1 class="largexl font-mont" id="watch-title">
                                    <span itemprop="name" class="bold title">{{ video.videoDescription.getName()}}</span>
                                </h1>
                                <div class="margin-top-5 margin-bottom-5">
                                    {% if(video.videoDescription.getYearPublish()) %}
                                        <span id="relYear">{{video.videoDescription.getYearPublish()}}</span>
                                        <span class="sep-pipe">|</span>
                                    {% endif %}

                                    {% if(video.getDuration()) %}
                                        <span id="videoDuration">{{video.getDuration()}} phút</span>
                                        <span class="sep-pipe">|</span>
                                    {% endif %}

                                    <span id="viewCount" class="">
                                        <span class="view-count"></span>
                                        <span>{{ video.getTotalView() }} lượt xem</span>
                                    </span>
                                </div>
                                {% if(video.videoCategoryLink|length) %}
                                <div class="margin-bottom-10">
                                    <span class="bold">Thể loại : </span>
                                    <span>
                                        {% for videoCategoryLink in video.videoCategoryLink %}
                                            {{ videoCategoryLink.category.getName() ~ ' , ' }}
                                        {% endfor %}
                                    </span>
                                </div>
                                {% endif %}
                                <div class="movie-share margin-bottom-10">
                                    <div class="pull-left">
                                        <a class="" ng-click="clickViewDetailInfo()">
                                            <i class="fa fa-info-circle fa-2x"></i>
                                            Chi tiết
                                        </a>
                                    </div>
                                    <div class="pull-left">
                                        <a ng-click="focusCommentFacebook()">
                                            <i class="fa fa-comments fa-2x"></i>
                                            <span>Bình luận</span>
                                        </a>
                                    </div>
                                    <div class="pull-left margin-right-30">
                                        <div class="fb-like" data-href="{{ url(video.getLinkTo()) }}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
                                    </div>
                                    <div class="pull-left">
                                        <div class="g-plusone" data-size="medium" ></div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="margin-bottom-20" ng-show="viewDetailInfo">
                                    {{ video.videoDescription.getDescription() }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
    {% if(blockVideoGroup) %}
        {{ blockVideoGroup }}
    {% endif %}

    {% if(blockVideoLikes) %}
        {{ blockVideoLikes }}
    {% endif %}
{% endblock %}

{% block videoComments %}
    <div id="fb-comments" class="video-comments">
        <div class="mask">
            <div class="container">
                <div class="row">
                    <div class="page-header">
                        <h3 class="text-left">Bình luận</h3>
                    </div>
                    <div class="fb-comments" data-href="http:/{{url(video.getLinkTo())}}" data-numposts="10" data-colorscheme="light" data-width="100%"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
